<template>
	<view>
		<view class="search-box">
			<my-search/>
		</view>
		<view class="scroll-view-container" >
			<scroll-view class="left-scorll-view" scroll-y="true" :style="{height: infow + 'px'}">
				<block v-for="(item,i) in CateListOne" :key="i">
					<view :class="['left-scroll-view-item', i === active ? 'active': '']" @click="activeChange(i)">
						{{item.cat_name}}
					</view>
				</block>
			</scroll-view>
			
			<scroll-view class="right-scorll-view" scroll-y="true" :scroll-top="scrollTop" :style="{height: infow + 'px'}">
				<view class="right-scorll-view-item1" v-for="(item,j) in CateListTwo" :key="j">
					/ {{item.cat_name}} /
					<view class="right-scorll-view-list">
						<view v-for="item in item.children" :key="item.cat_id" class="right-scorll-view-item2" @click="getGoodsList(item.cat_id)">
							<image :src="item.cat_icon" mode="widthFix"></image>
							<text>{{item.cat_name}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		
	</view>
</template>

<script>

import { getCate } from '@/config/api.js';
import badgeMix from '../../mixins/tabbar-badge.js'
	export default {
		data() {
			return {
				infow: 0,
				Hheight: 150,
				CateListOne: [],
				CateListTwo: [],
				CateListThree: [],
				active: 0,
				scrollTop: 0
			};
		},
		mixins: [badgeMix],
		onLoad(){
			//当前设备的相关信息
			const info = uni.getSystemInfoSync()
			this.infow = info.windowHeight - 50
			console.log(info);
			
			this.getCateList()
		},
		methods:{
			async getCateList(){
				const {data:res} = await getCate()
				this.CateListOne = res.message
				this.CateListTwo = res.message[0].children
				// this.CateListThree = this.CateListTwo[0].children
				// console.log(this.CateListTwo);
				// console.log(this.CateListThree);
			},
			activeChange(i){
				this.active = i
				this.CateListTwo = this.CateListOne[i].children
				this.scrollTop = this.scrollTop === 0 ? 1 : 0
				// this.CateListThree = this.CateListOne[i].children[i].children
			},
			getGoodsList(id){
				uni.navigateTo({
					url: '/subpkg/goods_list/goods_list?cid='+ id
				})
			}
		}
	}
</script>

<style lang="scss">
	.scroll-view-container {
	  display: flex;
	
	  .left-scorll-view {
	    width: 120px;
	
	    .left-scroll-view-item {
	      line-height: 60px;
	      background-color: #f7f7f7;
	      text-align: center;
	      font-size: 12px;
	
	      // 激活项的样式
	      &.active {
	        background-color: #ffffff;
	        position: relative;
	
	        // 渲染激活项左侧的红色指示边线
	        &::before {
	          content: ' ';
	          display: block;
	          width: 3px;
	          height: 30px;
	          background-color: #c00000;
	          position: absolute;
	          left: 0;
	          top: 50%;
	          transform: translateY(-50%);
	        }
	      }
	    }
	  }
	}
	
	.right-scorll-view {
		// border: 2px solid red;
		.right-scorll-view-item1 {
			text-align: center;
			margin: 20rpx 0;
			// border: 2px solid green;
		}
		.right-scorll-view-list {
			display: flex;
			flex-wrap: wrap;
			.right-scorll-view-item2 {
					display: flex;
					width: 33.33%;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					margin: 20rpx 0;
					image {
					      width: 60px;
					      height: 60px;
					    }
					text {
						font-size: 12px;
					}
				}
			}
		}
		.search-box {
		//吸顶的效果
		position: sticky;
		top:0;
		z-index: 15;
	}

</style>
